<template>
	<view 	class="css-theme" :class="[cueTheme]" :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<view class="sharebtn">
			<view class="uni-share">
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @click='btnShare(index)'>
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
				<view class="cancel" @click="cancel">取消</view>
				
			</view>
		</view>
		
		<!-- 显示海报 -->
		<!-- <view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal"> -->
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''">
			<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" >
				<view class="bg-img">
					<!-- 自定义生成海报组件 -->
					<!-- @success：成功事件  imgSrc：图片地址（微信小程序必须白名单iP） QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
						<poster @success="posterSuccess" :imgSrc="imgShare" :QrSrc="erweimapath"
							:Title="goods.itemtitle" :topTitleColor="topTitleColor" :PriceTxt="goods.itemendprice" :OriginalTxt="goods.itemprice"
							:LineType="false"></poster>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import poster from '@/my-components/cc-poster/cc-poster.vue'
	
	export default {
		components: {
			poster
		},
		data() {
			return {
				bottomData: [{
						text: '微信',
						icon: '/static/images/weixin.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/images/pengyouquan.png',
						name: 'copy'
					},
					{
						text: 'QQ',
						icon: '/static/images/qq.png',
						name: 'qq'
					},
					{
						text: '保存',
						icon: '/static/images/shouji.png',
						name: 'copy'
					}
				],
				// sharedataTemp: {
				// 	type: 0,
				// 	strShareUrl: "https://uniapp.dcloud.io",
				// 	strShareTitle: "分享标题",
				// 	strShareSummary: "分享总结",
				// 	strShareImageUrl: "/static/sharemenu/copyurl.png"
				// }
				
				//分享变量
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				erweimapath:  getApp().globalData.url+"/profile/upload/common/erweima.png",
				goods: {
					"itemid": "",
					"itemtitle": "",
					"itemshorttitle": "",
					"itemdesc": "",
					"itemprice": "",
					"todaysale": "",
					"itempic": "/static/bg/1.jpg",
					"itemendprice": "",
				}
			}
		},
		props: {
			sharedataTemp: {
			  type: Object,
			  default:{}
			},
			// ["sharedataTemp"],
			imgShare:{
				type:String,
				default:''
			},
			topTitleColor: {
				//标题颜色
				Type: String,
				default: '#f1f1f1'
			},
		},
		// onLoad() {
		// 	console.log('sharedataTemp',this.sharedataTemp);
		// },
		watch:{
			imgShare:{
				handler(newCheck,oldCheck){
					if(newCheck!=''){
						this.showModal()
					}
					
				}
			}
		},
		methods: {
			btnShare(ind) {
				console.log(ind);
				var strProvider = "",
					strScene = "",
					mytype = '';
				switch (ind) {
					case 0:
						strProvider = "weixin"
						strScene = "WXSceneSession"
						mytype = 2
						break;
					case 1:
						strProvider = "weixin"
						strScene = "WXSenceTimeline"
						mytype = 2
						break;
					case 2:
						strProvider = "qq"
						strScene = "WXSenceTimeline"
						mytype = 2
						break;
					case 3:
						uni.saveImageToPhotosAlbum({
							filePath: this.sharedataTemp.strShareImageUrl,
							success: function() {
								uni.showToast({
									title: '保存成功',
									duration: 1500
								});
							},
							complete() {
								uni.hideLoading();
							}
						});
						break;
				}
				if (strProvider != "") { //点击了0-3序号的这4个按钮
					uni.share({
						provider: strProvider,
						scene: strScene,
						type: mytype,
						href: this.sharedataTemp.strShareUrl,
						title: this.sharedataTemp.strShareTitle,
						summary: this.sharedataTemp.strShareSummary,
						imageUrl: this.sharedataTemp.strShareImageUrl,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}
			},
			
			//分享
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;			
				this.sharedataTemp.strShareImageUrl = haibaoImg.tempFilePath
				console.log(haibaoImg.tempFilePath)
				this.modalName = 'Image';
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;
					uni.showLoading({
						title: '海报生成中...'
					});
				} else {
					this.modalName = 'Image';
				}
			},
			// hideModal() {
			// 	this.modalName = null;
			// },
			
			cancel(){
				this.modalName = null;
				this.$emit('clickCancel', 0) 
			},
		}
	}
</script>

<style lang="scss" >
	page {
			height: 100%;
			width: 100%;
			margin: 0;
			background-color: $page-bg !important;
		}
		
		.css-theme {
			@include text-color();
			@include base-background();
			@include border-color();
			@include shadow-color();
		}
	
	/* 底部分享 */
	.sharebtn {
		
		.uni-share {
			width: 690rpx;
			margin: 30rpx;
			
			border-radius: 30rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			// background-color: #fff;
			.uni-share-content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				overflow-x: scroll;
				padding: 15px 50rpx;
				.uni-share-content-box {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					// width: 25%;
					// justify-content: space-between;
					margin-right: 60rpx;
					&:nth-last-child(1) {
						margin-right: 0;
					}
					.uni-share-content-image {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						overflow: hidden;
						border-radius: 10rpx;
						
						// background-color: #f1f1f1;
						.content-image {
							width: 60rpx;
							height: 60rpx;
						}
					}
					// &:nth-last-child(1){
					// 	.uni-share-content-image .content-image {
					// 		width: 50rpx!important;
					// 		height: 50rpx!important;
					// 	}
					// }
					.uni-share-content-text {
						font-size: 26rpx;
						// color: #333;
						padding-top: 5px;
						padding-bottom: 10px;
					}
				}
			}
		}
	}
	
	
	// 分享start
	
	.cu-modal {
		position: fixed;
		// top: 0;
		right: 0;
		bottom: 160px;
		left: 0;
		z-index: 1110;
		opacity: 0;
		// outline: 0;
		text-align: center;
		// -ms-transform: scale(1.185);
		// transform: scale(1.185);
		// backface-visibility: hidden;
		// perspective: 2000upx;
		// background: rgba(0, 0, 0, 0.6);
		// transition: all 0.3s ease-in-out 0s;
		// pointer-events: none;
	}
	
	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		// overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		// width: 680upx;
		max-width: 100%;
		// background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}
	//分享end
	.cancel{
		text-align: center;height: 30px;line-height: 40px;width: 100%;display: flex;justify-content: center;
		border-top: 1px solid #ccc;
	}
</style>
